<template>
    <div class="content">
        <div class="title">
            <van-icon @click="router.back()" class="icon" size="22px" color="#fff" name="arrow-left" />
            <div class="text"></div>
            <div></div>
        </div>
        <van-tabs color="#f0b90b" background="#17171a" title-active-color="#fff" title-inactive-color="#a8aeae"
            v-model:active="active">
            <van-tab :title="$t('當前委託')">當前委託</van-tab>
            <van-tab :title="$t('歷史委託')">歷史委託</van-tab>
            <van-tab :title="$t('歷史成交')">歷史成交</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const active = ref(0)
</script>

<style lang="scss" scoped>
.content {
    width: 100vw;
    height: 100vh;
    background-color: #17171a;
    padding: 0 15px;
    box-sizing: border-box;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 54px;
        padding: 15px 0;
        box-sizing: border-box;

        .text {
            font-size: 15px;
            color: #fff;
        }
    }
}
</style>